<script setup lang='ts'>
import { ref, reactive, onMounted, defineProps, watch, computed } from 'vue';
import { emitter } from "@/utils/mitt";
import { ElMessage, FormInstance } from "element-plus";
import { ProRiskGetOption } from "@/api/stu/InsuranceData";
import type { TableColumnCtx } from 'element-plus'
import { type PaginationProps } from "@pureadmin/table";
import qs from 'qs';
const tableData = ref<any>([]);
const mymark = reactive({
  smark1: "",
  smark2: "",
  smark3: "",
  smark4: "",
  smark5: "",
  smark6: "",
  smark7: "",
  smark8: "",
  smark9: "",
  smark10: "",
  smark11: "",
  smark12: "",
  smark13: "",
  smark14: "",
  smark15: "",
  smark16: "",
  smark17: "",
  smark18: "",
  smark19: "",
  smark20: "",
  smark21: "",
  smark22: "",
  smark23: "",
  smark24: "",
  smark25: "",
  smark26: "",
  smark27: "",
  smark28: "",
  smark29: "",
  smark30: "",
  smark31: "",
  smark32: "",
  smark33: "",
  smark34: "",
  smark35: "",
  smark36: "",
  smark37: "",
  smark38: "",
  smark39: "",
  smark40: "",
  smark41: "",
  smark42: "",
  smark43: "",
  smark44: "",
  smark45: "",
  smark46: "",
  smark47: "",
  smark48: "",
  smark49: "",
  smark50: "",
  smark51: "",
  smark52: "",
  smark53: "",
  smark54: "",
  smark55: "",
  smark56: "",
  smark57: "",
  smark58: "",
  smark59: "",
  smark60: "",
  smark61: "",
  smark62: "",
  smark63: "",
  smark64: "",
  smark65: "",
  smark66: "",
  smark67: "",
  smark68: "",
  smark69: "",
  smark70: "",
  smark71: "",
  smark72: "",
  smark73: "",
  smark74: "",
  smark75: "",
  smark76: "",
  smark77: "",
  smark78: "",
  smark79: "",
  smark80: "",
  smark81: "",
  smark82: "",
  smark83: "",
  smark84: "",
});
const smark = ref();
const prop = defineProps({
  item1: Object,
  item2: Object
});
watch(prop, newval => {
  tableData.value = newval.item2;
})
const spanMap = ref({});
const validateNum = (rule: any, value: any, callback: any) => {
  if (value === '') {
    return callback(new Error('请设置分值'))
  } else if (Number(value) > 10) {
    return callback(new Error('最大分数值为10'))
  } else {
    return callback()
  }
}


const objectSpanMethod = ({ column, rowIndex }) => {
  if (spanMap[column.property]) {
    const _row = spanMap[column.property].spanArr[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col
    }
  }
}

function hanStubimMark() {
  StubimMark(smark.value)
}

function hanRemoveMark() {
  RemoveMark(smark.value)
}

function StubimMark(row: FormInstance) {
  (row as any).validate(async valid => {
    console.log("valid", row)
    if (valid) return;
    console.log("stubim", mymark)
  })
}

// 清空表单
function RemoveMark(row: FormInstance) {
  row.resetFields()
}


defineExpose({
  hanStubimMark,
  hanRemoveMark
})

</script>
<template>
  <div>
    <el-table :data="tableData" border :span-method="objectSpanMethod" style="width: 100%; margin-top: 20px">
      <el-table-column prop="label" label="数据类型" width="100" />
      <el-table-column prop="dictName" label="参数" width="100" />
      <el-table-column prop="details" label="详情">
        <template #default="scope">
          <el-form class="smark" ref="smark" :inline="true" :model="mymark">
            <dl class="table_type">
              <dd v-for="(u, o) in scope.row.paramValues">
                <el-form-item :label="u.paramValue" :prop="['smark' + Number(u.id)]"
                  :rules="[{ required: true, validator: validateNum, trigger: ['blur', 'change'] }]">
                  <el-input size="small" v-model="mymark['smark' + Number(u.id)]" />
                </el-form-item>
              </dd>
            </dl>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="权重" width="60" />
    </el-table>
    <!-- 设置分数 -->
  </div>
</template>

<style scoped lang="scss">
.table_type {
  display: flex;
  margin: 2px;
  flex-wrap: wrap;

  dd {
    display: flex;
    align-items: center;
    margin: 2px 4px;

    .el-input {
      width: 80px;
    }
  }
}

:deep(.el-form-item__label) {
  font-weight: 400;
}
</style>
